<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <link rel="stylesheet" href="./static/icon/iconfont.css" />
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <title>青春有我</title>
    <style>
      .pop-up {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1rem;
        text-shadow: 2px 2px 6px rgba(255,255,255,0.8);
        animation: toUp ease-in-out 2s;
        z-index: 999999;
      }
      @keyframes toUp {
        0%{
          transform: translateY(0);
          color: #f8ff1e;
        }
        100%{
          transform: translateY(-40vh);
          color: #ec1160;
          opacity: .2;
        }
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app" style="height: 100vh;width: 100vw"></div>
    <!-- built files will be auto injected -->
    <!--通过script标签引入，window.echarts-->
    <script src="static/lib/echarts.min.js"></script>
    <!--全局echarts，挂载-->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
    <script src="static/lib/flexible.js"></script>
    <!--flex布局-->
    <script>
      let str="青春有我"
      let indexOfStr = 0
      function createPopUp(x, y, text) {
        const popUpEl = document.createElement('div');
        popUpEl.innerText = text;
        popUpEl.classList.add('pop-up');
        popUpEl.style.top = y + 'px';
        popUpEl.style.left = x + 'px';
        document.body.appendChild(popUpEl);
        setTimeout(() => {
          document.body.removeChild(popUpEl);
        }, 800);
      }

      document.addEventListener('click', (event) => {
        createPopUp(event.pageX, event.pageY, str[indexOfStr]);
        indexOfStr = (indexOfStr+1)%str.length
      });
    </script>
  </body>
</html>
